<script lang="ts" setup>
const props = defineProps({
    icon: {
        type: String,
        default: 'menu'
    },
    label: {
        type: String,
        default: 'menu'
    },
    select: {
        type: Boolean,
        default: false
    },
    mini: {
        type: Boolean,
        default: false
    }
})

</script>

<template>
  <div :class="['menu-item',select?'menu-item-sel':'']">
    <div class="menu-box">
      <v-icon class="icon-box" :icon="icon" />
      <div class="menu-lb">
        <slot>{{ label }}</slot>
      </div>
    </div>
    <el-tooltip :content="label" placement="right" :disabled="!mini" effect="dark">
      <div class="menu-mask" />
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.menu-item{
  flex:none;
  position:relative;
  width:100%;
  height:40px;
  cursor:pointer;
  color:$f-color-menu0;
  margin-bottom: 2px;

  .menu-box{
    @include abs-group();
    @include hor-group();
    overflow: hidden;
    padding: 0 15px;
    box-sizing: border-box;

    .icon-box{
      flex:none;
      font-size:18px;
      color: $f-color-nor2;
    }

    .menu-lb{
      @include text-dot();
      flex:auto;
      width:100%;
      font-size: 15px;
      font-weight: 500;
      padding-left: 12px;
      box-sizing: border-box;
      color: $f-color-nor2;
    }
  }
  .menu-mask{
    position:absolute;
    background: rgba(13,109,254,0.08);
    cursor:pointer;
    overflow: hidden;
    left:0;
    top:0;
    height:100%;
    width:0;
  }
}
.menu-item:hover {
  .menu-box{
    .icon-box {
      color: #fff;
    }
    .menu-lb {
      color:#fff;
    }
  }
  .menu-mask {
    opacity: 1;
    width:100%;
    .menu-light-line{
      height: 0;
    }
  }
}

.menu-item-sel,.menu-item-sel:hover{
  .menu-box{
    .icon-box {
      color: #fff;
    }
    .menu-lb {
      color:#fff;
    }
  }
  .menu-mask {
    background: rgba(13,109,254,0.3);
    width:100%;
    opacity: 1;
    .menu-light-line{
      height:100%;
    }
  }

 }

</style>
